<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法1：插值表达式data,methods,computed和watch</title>
    <script src="http://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1 style="color: red;">知识点1：插值表达式{{}}</h1>
        <p>第一变量的数据在这里展示：{{msg}}</p>
        <!--{{}}差值表达式的符号-->
        <p>我是可以进行计算的表达式:{{4+5*5}}</p>
        <p>我也可以用变量进行计算：{{num+1}}</p>
        <p>我也可以是条件运算符：{{1+1==2?'ok':'no'}}</p>
        <p>我也可以放一些函数等：{{add()}}</p>
        <h1 style="color: red;">知识点2：data</h1>
        <h3>我们在控制台中可以通过实例名.$data的形式来访问或修改data中的数据</h3>
        <h1 style="color: red;">知识点3：methods</h1>
        <h3>创建方法的格式：方法名(){} 或方法名:function(){}</h3>
        <h3>通过调用方法可以实践比较复杂的一些代码</h3>
        <p>调用函数：{{sub(9999)}}</p>
        <h1 style="color: chocolate;">知识点4:computed计算属性</h1>
        <h3>当我们在插值表达式里面或方法里进行一些复杂逻辑的时候,vue提示我们使用computed计算属性
            在计算属性里面,我们可以完成各种比较复杂的逻辑，包括逻辑计算，函数调用等，最后返回一个结果就可以了。
        </h3>
        <p>{{rev}}</p>
        <p>{{revMethods()}}</p>
        <!-- 计算属性在页面中调用时，后面是不加括号 -->
        <h3>计算属性是基于其依赖的变量进行缓存的，只有它依赖的变量发生改变，才会重新求值，
            而方法是每次页面渲染（刷新）时都会重新计算</h3>
        <h3>计算属性通常是只读的，不能进行修改</h3>
        <h1>知识点5:watch监听</h1>
        <h3>当我们需要在某种状态变化时,执行一些其他的操作，watch具有状态监听的功能
            只要监听到当前vue实例中的数据变化，就会调用当前数据所绑定的方法
        </h3>
        <h4>1.函数监听器:在watch选项中声明的函数即为函数式侦听器，其中函数名就是我们要侦听的数据源</h4>
        <h4>2.对象式侦听器:在watch中声明的对象即为对象式侦听器，其中对象名就是我们要侦听的对象</h4>
    </div>
</body>
</html>

<script>
    const appCon=Vue.createApp({
        //data里面放置全部的数据，包括变量，对象等
        data() {
            return {
                msg:'我的第一个vue页面！', //这是创建的字符串变量
                num:1,                    //这是创建的整型变量
                grade:60,
                users:{
                    name:'jinfanyue',
                    age:18
                }                  
            }
        }, 
        //methods里面放的是全部的方法(函数)
        methods: {
            //创造一个累加的函数
            add(){
                return this.num+100
            },
            //创建一个带参数的方法
            sub:function(val){
                return this.num + val
            },
            //也可以写成sub(val){}
            revMethods(){
                console.log("我是方法,我被调用了一次！");
                return this.msg.split('').reverse().join('')
            }
        },
        computed:{
            //在此处放置计算属性
            rev(){
                console.log("我是计算属性,我被调用了一次！");
                return this.msg.split('').reverse().join('')
            }
        },
        watch:{
            //函数式侦听器
            grade(newData,oldData){
                console.log("改变前的数据"+oldData);
                console.log("改变后的数据"+newData);
            },
            //对象式侦听器
            'users.age':{
                handler(newData,oldData){
                    console.log('改变前的年龄'+oldData);
                    console.log('改变后的年龄'+newData);
                    if(newData>=120||newData<0){
                        console.log('你确定你输入的是年龄？');
                    }
                }
            }
        }
    }).mount("#app")
</script>